<template>
  <view class="page">
    <view class="user_box">
      <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
      <view class="nickname" v-if="merchantInfo">{{ merchantInfo.merchant['merchantName'] }}</view>
      <!-- <view class="rolename">角色: 服务商</view> -->
    </view>

    <view class="manager_box content">
      <view class="section">
        <view class="h">店铺管理</view>
        <view class="list">
          <view class="item" v-for="item in pageData['shop']" @click="handlerClick(item)">
            <image class="img" :src="item.icon" mode="widthFix"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="section">
        <view class="h">商品管理</view>
        <view class="list">
          <view class="item" v-for="item in pageData['goods']" @click="handlerClick(item)">
            <image class="img" :src="item.icon" mode="widthFix"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="section">
        <view class="h">券包管理</view>
        <view class="list">
          <view class="item" v-for="item in pageData['coupons']" @click="handlerClick(item)">
            <image class="img" :src="item.icon" mode="widthFix"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="section">
        <view class="h">店铺装修</view>
        <view class="list">
          <view class="item" v-for="item in pageData['decorate']" @click="handlerClick(item)">
            <image class="img" :src="item.icon" mode="widthFix"></image>
            <view class="label">{{ item.label }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="empty_box" :style="{ height: barHeight + 'px' }"></view>
  </view>

  <tabBar :current="2" @barHeight="setBarheight" />
</template>

<script setup>
  import { ref, computed, nextTick } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import tabBar from '../../components/tabbar/tabbar';
  import { queryMerchantInfo } from '../../apis/pages';


  uni.hideTabBar();
  const barHeight = ref(0);

  const merchantInfo = ref('');

  const pageData = ref({
    shop: [
      {
        label: '创建品牌',
        icon: '/static/icon/brand.png',
        path: '/pagesB/brand/index',
      },
      {
        label: '创建店铺',
        icon: '/static/icon/shop.png',
        path: '/pagesB/shop/index?from=home',
      },
      {
        label: '商户管理',
        icon: '/static/icon/all.png',
        path: '/pagesB/merchant/manage',
      },
    ],
    goods: [
      {
        label: '全部商品',
        icon: '/static/icon/all_goods.png',
        path: '/pagesB/goods/all',
      },
      {
        label: '创建商品',
        icon: '/static/icon/goods.png',
        path: '/pagesB/goods/index?from=home',
      },
    ],
    coupons: [
      {
        label: '全部券包',
        icon: '/static/icon/all_coupon.png',
        path: '/pagesB/coupon/all',
      },
      {
        label: '创建券包',
        icon: '/static/icon/coupon.png',
        path: '/pagesB/coupon/index?from=home',
      },
    ],
    decorate: [
      {
        label: '店铺装修',
        icon: '/static/icon/decorate.png',
        path: 'developing',
      },
    ],
  });

  onLoad(() => {
    console.log('onLoad');
    // getMerchantInfo();
  });

  // function getMerchantInfo() {
  //   queryMerchantInfo().then((res) => {
  //     merchantInfo.value = res;
  //     formStore.setMerchantId(res.merchant.id);
  //   });
  // }

  function handlerClick(data) {
    if (data.path == 'developing') {
      uni.showToast({
        title: data.label + '开发中',
        icon: 'none',
      });
      return;
    }

    if (data.path) {
      uni.navigateTo({
        url: data.path,
      });
    } else {
      console.info('未配置跳转路径');
    }
  }

  function setBarheight(height) {
    barHeight.value = height;
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #f0f0f0;
    background-image: url('/static/bg.png');
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .content {
    background-color: #fff;
    padding: 28rpx 42rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
  }

  .user_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar {
      width: 130rpx;
      height: 130rpx;
      vertical-align: middle;
      border-radius: 50%;
      // margin-bottom: 20rpx;
    }

    .nickname {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }

    // .rolename {
    //   color: #ccc;
    // }
  }

  .manager_box {
    .section {
      box-sizing: border-box;
      margin-bottom: 20rpx;
      .h {
        font-weight: 600;
        font-size: 30rpx;
        color: #1e2737;
        margin-bottom: 14rpx;
      }

      .list {
        display: flex;
        flex-wrap: wrap;
        background-color: #f0f0f0;
        border-radius: 20rpx;
        // padding-left: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 40rpx;

          .img {
            width: 60rpx;
            height: 60rpx;
            vertical-align: middle;
            margin-bottom: 10rpx;
          }

          .label {
            color: #333;
          }
        }
      }
    }
  }
</style>
